<template>
  <div class="roster">

    <div class="roster-list"
         ref="pullList">
      <div class="roster-list-per"
           v-for="(item,index) in page.list"
           :key="index">
        <div class="roster-list-per-contain">
          <div class="roster-list-per-contain-contain">
            <div class="roster-list-per-contain-contain-left">
              <img class="roster-list-per-contain-contain-left-img"
                   :src="item.headurl">
              <div class="roster-list-per-contain-contain-left-contain">
                <div class="roster-list-per-contain-contain-left-contain-name">{{item.mname || item.nickname}}</div>

                <div class="roster-list-per-contain-contain-left-contain-date">
                  <span>{{item.phone}}</span>

                </div>
              </div>
            </div>
            <div class="roster-list-per-contain-contain-right">

              <div class="roster-list-per-contain-contain-right-identity">
                <span>{{identityMore[item.type]}}</span>
              </div>

              <div class="roster-list-per-contain-contain-right-register">
                {{item.mdate && item.mdate.split(' ')[0]}}注册

              </div>

            </div>
          </div>
        </div>
        <div class="roster-list-per-dividing"
             v-if="index !== page.list.length-1"></div>
      </div>
      <span class="loadding-end"
            ref="end"
            v-if="page.loaded && !page.more > 0">木有啦,滑到最后了~</span>

      <div class="loadding-up"
           v-if="(page.loading && page.more)&&page.list.length > 0">
        <div class="loadding-up-div"></div>
      </div>
    </div>

    <error-page  :imgWidth="257"
                :imgHeight="295"
                top="95"
                emptyImg="empty-shopcat"
                :type="'text'"
                :zIndex="0"
                emptyDesc="<span style='color:RGBA(153, 153, 153, 1);font-size:0.30rem'>您还没邀请到的客户哦...</span>"
                v-if="page.loaded&&page.list.length===0" />
  </div>
</template>

<script>
import mixins from '@/mixins'
import pageList from '@/components/common-js/page-list'
export default {
  mixins: [mixins, pageList],
  data () {
    return {
      error: {
        emptyImg: 'empty-roster',
        emptyDesc: '还没有人参加砍价活动'
      },
      page: {
        url: 'zMembers/myCustomer.json'
      },

      identityMore: ['会长', '副会长', '会员'],
      showBottom: 0
    }
  },

  async mounted () {
    await this.loadPageList()
    this.getTotalCount()
    this.pull()
  },
  methods: {
    async getTotalCount () {
      let result = await this.$ajax.get('/zMembers/myCustomerCount.json')
      document.title = `我的客户(${(result.result || 0)})`
    },
    pull () {
      let self = this
      this.observer = new IntersectionObserver(function (val) {
        if (val[0].isIntersecting) {
          self.loadPageList(this.url)
        } else {
        }
      })
      this.$nextTick(() => {
        this.$refs.end && this.observer.observe(this.$refs.end)
      })
    }
  }
}
</script>


<style lang="stylus" scoped>
.roster {
  height: 100vh;

  .roster-list {
    background: white;

    // margin-bottom: 98px;
    .roster-list-per {
      .roster-list-per-contain {
        margin-left: 24px;
        display: flex;
        // height: 155px;
        align-items: center;

        .roster-list-per-contain-contain {
          display: flex;
          justify-content: space-between;
          flex: 1;
          margin-top: 38px;

          .roster-list-per-contain-contain-left {
            padding-left: 16px;
            display: flex;

            .roster-list-per-contain-contain-left-img {
              width: 98px;
              height: 98px;
              border-radius: 50%;
            }

            .roster-list-per-contain-contain-left-contain {
              display: flex;
              margin-left: 25px;
              justify-content: space-between;
              flex-direction: column;
              margin-top: 3px;
              margin-bottom: 2px;

              .roster-list-per-contain-contain-left-contain-name {
                font-size: 30px;
                color: rgba(51, 51, 51, 1);
              }

              .roster-list-per-contain-contain-left-contain-date {
                font-size: 26px;
                color: rgba(51, 51, 51, 1);
              }
            }
          }

          .roster-list-per-contain-contain-right {
            margin-right: 25px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            margin-top: 3px;
            margin-bottom: 2px;

            .roster-list-per-contain-contain-right-identity {
              font-size: 28px;
              color: rgba(51, 51, 51, 1);
              display: flex;
              justify-content: flex-end;
              align-items: center;
            }

            .roster-list-per-contain-contain-right-register {
              display: flex;
              align-items: center;
              font-size: 26px;
              justify-content: flex-end;
              color: rgba(153, 153, 153, 1);
            }
          }
        }
      }

      .roster-list-per-dividing {
        margin-left: 25px;
        margin-right: 25px;
        margin-top: 27px;
        height: 1px;
        background: rgba(220, 220, 220, 1);
      }
    }
  }
}
</style>
